<template>
	<view class="page-index">
		<view class="search-bar" @click="goToSearch">
			<view class="search-bar-box">
				<input type="text" value="" placeholder="请输入搜索内容" class="search-text" maxlength="10" focus />
			</view>
		</view>
		<view class="swiper">
			<swiper :indicator-dots="indicatorDots" :duration="1000" :autoplay="autoplay" :interval="3000">
				<swiper-item>
					<view class="swiper-item">
						<image class="swiper-img" src="../../static/index/banner1.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="swiper-img" src="../../static/index/banner2.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="swiper-img" src="../../static/index/banner3.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--Icons-->
		<view class="Icon">
			<view class="icons">
				<view class="item" @click="goToMap()">
					<view class="img">
						<image class="img" src="../../static/images/location.png"></image>
					</view>
					<view class="text">
						附近
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/dog.png"></image>
					</view>
					<view class="text">
						狗狗
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/cat.png"></image>
					</view>
					<view class="text">
						猫咪
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/other.png"></image>
					</view>
					<view class="text">
						异宠
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/purchase.png"></image>
					</view>
					<view class="text">
						求购
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/Audition.png"></image>
					</view>
					<view class="text">
						甄选馆
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/petsStore.png"></image>
					</view>
					<view class="text">
						商城
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/show.png"></image>
					</view>
					<view class="text">
						买家秀
					</view>
				</view>
			</view>
		</view>
		<!--特惠专区-->
		<view class="special">
			<view class="tit">
				<view class="text">
					特惠专区
				</view>
				<view class="more text-arrow">
					全部
				</view>
			</view>
			<scroll-view class="commodity" scroll-x="true" @scroll="scroll">
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
			</scroll-view>
		</view>
		<!--最新上架-->
		<view class="latest">
			<view class="tit">
				<view class="text">
					最新上架
				</view>
				<view class="more text-arrow">
					全部
				</view>
			</view>
			<scroll-view class="commodity" scroll-x="true" @scroll="scroll">
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
			</scroll-view>
		</view>
		<!--优宠精选-->
		<view class="excellent">
			<view class="tit">
				<view class="text">
					优宠精选
				</view>
				<view class="more text-arrow">
					全部
				</view>
			</view>
			<scroll-view class="commodity" scroll-x="true" @scroll="scroll">
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
			</scroll-view>
		</view>
		<!--甄选宠物-->
		<view class="selected">
			<view class="tit">
				<view class="text">
					甄选宠物
				</view>
				<view class="more text-arrow">
					全部
				</view>
			</view>
			<scroll-view class="commodity" scroll-x="true" @scroll="scroll">
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/commodity/dog.jpg" mode=""></image>
					</view>
					<view class="text">
						一只狗
					</view>
					<view class="discounted-price">
						￥1500
					</view>
					<view class="original-price">
						￥2008
					</view>
				</view>
			</scroll-view>
		</view>
		<!--切换-->
		<view class="change-box">
			<waterfall :ComListSon="pets"></waterfall>
			<!-- <view v-for="(item, index) in pets" :key="index" class="waterfalls-flow-column"
				@click="goToDetail(item.goodsID)">
				{{item.goodsID}}
				{{item.goodsName}}
				{{item.price}}
			</view> -->
			<!-- <view class="nav_page">
				<view class="text">
					<view class="item">
						<text :class="currentPages=== 0 ? 'act' : ''" @tap="currentChange(0)">全部</text>
					</view>
					<view class="item">
						<text :class="currentPages=== 1 ? 'act' : ''" @tap="currentChange(1)">热门</text>
					</view>
					<view class="item">
						<text :class="currentPages=== 2 ? 'act' : ''" @tap="currentChange(2)">猫咪</text>
					</view>
					<view class="item">
						<text :class="currentPages=== 3 ? 'act' : ''" @tap="currentChange(3)">狗狗</text>
					</view>
					<view class="item">
						<text :class="currentPages=== 4 ? 'act' : ''" @tap="currentChange(4)">异宠</text>
					</view>
				</view>
			</view> -->

			<!-- 列表展示 平滑切换效果 -->
			<!-- <swiper :current="currentPages" class="swiper">
				<swiper-item class="swiper-item">
					<view v-for="(item, index) in pets" :key="index" class="waterfalls-flow-column"
						@click="goToDetail(item.goodsID)">
						{{item.goodsID}}
						{{item.goodsName}}
						{{item.price}}
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" style="height: 100vh;">
						<waterfall></waterFall>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" style="height: 100vh;">
						<waterfall></waterFall>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" style="height: 100vh;">
						<waterfall></waterFall>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" style="height: 100vh;">
						<waterFall></waterFall>
					</scroll-view>
				</swiper-item>
			</swiper> -->
		</view>
		<!--瀑布流-->
	</view>
</template>

<script>
	import waterfall from '../../components/waterFall/waterFall.vue';
	import service from '../../utils/request.js';

	export default {
		components: {
			waterfall
		},
		data() {
			return {
				oldScrollTop: 0,
				currentPages: 0,
				pets: []
			};
		},
		mounted() {
			this.getAllPetsData();
		},
		methods: {
			currentChange(index) {
				this.currentPages = index;
			},
			scroll(e) {
				console.log(e);
				this.oldScrollTop = e.target.scrollTop; // 在 Vue 2 中，你可能需要直接访问 DOM 元素
			},
			async getAllPetsData() {
				try {
					const response = await service.get('/pets/listAll');
					this.pets = response.data;
					console.log('获取的数据:', response);
				} catch (error) {
					console.error('获取数据失败:', error);
				}
			},
			goToMap() {
				uni.navigateTo({
					url: '/subpages/Amap/Amap'
				})
			},
			//详情
			goToDetail(goodsID) {
				uni.setStorageSync('goodsID', goodsID)
				uni.navigateTo({

					url: '/subpages/detail/detail?goodsID=${goodsID}'
				});
				console.log(typeof(goodsID))
			},
			goToSearch() {
				uni.navigateTo({
					url: '/pages/search-page/search-page'
				})
			}
		}
	};
</script>


<style lang="scss" scoped>
	@use "index";
</style>